<template>
  <Wrapper :show-title="false">
    <!-- 添加、搜索 -->
    <el-card
      shadow="never"
      style="margin-bottom: 13px;"
    >
      <el-row justify="space-between">
        <el-col :lg="4">
          <el-button
            icon="Plus"
            @click="list++"
          >添加数据</el-button>
        </el-col>
        <el-col :lg="6">
          <el-input
            v-model="value"
            placeholder="搜索(列表支持移动端展示)"
            suffix-icon="Search"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 列表 -->
    <el-row
      class="row"
      :gutter="20"
    >
      <el-col
        v-for="item in list"
        :key="item"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4"
      >
        <el-card
          :class="['card-item', ...disabledCls(item)]"
          shadow="hover"
        >
          <div class="card-item-header flex">
            <span>标题</span>
            <el-button
              plain
              :type="isDisabled(item) ? 'danger' : 'primary'"
              :disabled="isDisabled(item)"
            >{{ isDisabled(item) ? '禁用' : '启用' }}</el-button>
          </div>
          <p :class="['card-item-title', ...disabledCls(item)]">大标题</p>
          <p :class="['card-item-subtitle', ...disabledCls(item)]">描述性文案</p>
        </el-card>
      </el-col>
    </el-row>
  </Wrapper>
</template>

<script setup>
const value = ref('')
const list = ref(15)

const disabledCls = computed(() => (index) => {
  return [{ 'card-item-disabled': isDisabled(index) }]
})

function isDisabled(index) {
  return index % 2 === 0
}
</script>

<style scoped lang="scss">
.card-item {
  margin-bottom: $space-small;
  min-height: 150px;
  cursor: pointer;

  &:hover {
    box-shadow: 0 0 12px var(--el-color-primary-light-7);
  }

  &-header {
    justify-content: space-between;
  }

  &-title {
    font-size: $font-size-large;
    margin-top: $space-medium-x;
    margin-bottom: $space-small-s;
    color: var(--el-text-color-primary)
  }

  &-subtitle {
    color: var(--el-text-color-secondary);
    font-size: $font-size-small;
  }

  &-disabled {
    color: var(--el-text-color-disabled);
    cursor: not-allowed;
  }

  &-disabled.card-item:hover {
    box-shadow: none;
  }
}
</style>